<template>
    <div>
        <div style="display: flex; margin-bottom: 10px" >
            <el-input v-model="name" placeholder="请输入班级名称" suffix-icon="el-icon-search" style="width: 200px;margin-left: 10px " flex:1
                      @keyup.enter.native="loadPost"
            ></el-input>

            <el-button type="primary" style="margin-left: 10px" @click="loadPost">查询</el-button>
            <el-button type="success" @click="resetParam">重置</el-button>
            <el-button type="info" @click="add">新增</el-button>
        </div>
        <el-table :data="tableData"
                  :header-cell-style="{background:'darkgrey',color:'black'}"
                  style="height: 100%"
        >
            <el-table-column prop="id" label="ID" >
            </el-table-column>
            <el-table-column prop="courseName" label="课程名称" >
            </el-table-column>
            <el-table-column prop="createdTime" label="创建时间">
            </el-table-column>
            <el-table-column prop="status" label="状态">
            </el-table-column>

            <el-table-column prop="operate" label="操作" >
                <template v-slot="scope">
                    <el-button size="small" type="success" @click="mod(scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="del(scope.row.id)">删除</el-button>
                </template>

            </el-table-column>
        </el-table>

        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[5,10, 20,30]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

        <el-dialog
                title="提示"
                :visible.sync="centerDialogVisible"
                :before-close="handleClose"
                width="30%"
                center>

            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="课程名称" prop="courseName">
                    <el-col :span="20">
                        <el-input v-model="form.courseName"></el-input>
                    </el-col>
                </el-form-item>


                <el-form-item label="绑定活动">
                    <el-select v-model="activityId" placeholder="请选择活动" @change="handleActivityChange">
                        <el-option
                                v-for="activity in activities"
                                :key="activity.id"
                                :label="activity.name"
                                :value="activity.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="选择教师">
                    <el-select v-model="teacherId" placeholder="请选择一名教师" @change="handleTeacherChange">
                        <el-option
                                v-for="teacher in teachers"
                                :key="teacher.id"
                                :label="teacher.teacherName"
                                :value="teacher.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="教学班">
                    <el-select v-model="classId" placeholder="请选择教学班" @change="handleClassChange">
                        <el-option
                            v-for="classe in classes"
                            :key="classe.id"
                            :label="classe.name"
                            :value="classe.id">
                        </el-option>
                    </el-select>
                </el-form-item>



            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="save">确 定</el-button>
  </span>
        </el-dialog>

        <el-dialog
                title="确认删除？"
                :visible.sync="confirmDelete"
                width="30%"
                center>
            <template>
                <el-button size="small"  @click="cancel" style="margin-left: 160px;">取消</el-button>
                <el-button size="small" type="danger" @click="confirm(tableData)">确认</el-button>
            </template>
        </el-dialog>

    </div>
</template>

<script>

export default {
    name: "CoursePage",
    data(){
        return{
            id:0,
            tableData: [],
            pageSize:10,
            pageNum:1,
            total:0,
            name:'',

            activityId:null,
            activities: [], // 活动列表
            selectedActivityId: null, // 选中的活动ID
            teacherId:null,
            teachers:[],
            selectedTeacherId:null,
            classId:null,
            classes:[],
            selectedClassId:null,

            centerDialogVisible:false,
            confirmDelete:false,

            form:{
                id:0,
                courseName:'',
                createdTime:new Date,
                status:'0',
                teacherId:null,
                activityId:null,
                classId:null,
            },
        }

    },
    created() {
        this.fetchActivities(),
            this.fetchTeachers(),
            this.fetchClasses()
    },
    methods:{
        loadPost(){
            this.$axios.post('http://localhost:8090/course/list',{
                pageSize:this.pageSize,
                pageNum:this.pageNum,
                param: {
                    name: this.name,
                }}).then(res=>res.data).then(res=> {
                console.log(res)
                if(res.code==200){
                    this.tableData=res.data
                    this.total=res.total
                }else {
                    alert('获取数据失败')
                }
            })
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize=val
            this.loadPost()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageNum=val
            this.loadPost()
        },
        add(){
            this.centerDialogVisible=true
            this.$nextTick(()=>{
                this.resetForm();
            })
        },
        resetParam(){
            this.name=''
        },
        resetForm() {
            this.$refs.form.resetFields();
            this.activityId=''
            this.teacherId=''
            this.classId=''
        },
        save(){
            this.$refs.form.validate((valid) => {
                if (valid) {
                    if(this.form.id){
                        this.doMod();
                    }else {
                        this.doSave();
                    }

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });

        },
        doSave(){
            this.form.activityId=this.activityId
            this.form.teacherId=this.teacherId
            this.form.classId=this.classId
            this.$axios.post('http://127.0.0.1:8090/course/save',this.form).then(res=>res.data).then(res=> {
                console.log(res)
                if(res.code==200){
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    });
                    this.centerDialogVisible=false
                    this.loadPost()
                }else {
                    this.$message.error('添加失败');
                }
            })

        },
        fetchActivities() {
            this.$axios.get('http://127.0.0.1:8090/activity/getActivities')
                .then(response => {
                    this.activities = response.data;
                })
                .catch(error => {
                    console.error('获取活动列表失败:', error);
                });
        },
        handleActivityChange(value) {
            this.selectedActivityId = value;
        },
        fetchTeachers() {
            this.$axios.get('http://127.0.0.1:8090/teacher/getTeachers')
                .then(response => {
                    this.teachers = response.data;
                })
                .catch(error => {
                    console.error('获取教师列表失败:', error);
                });
        },
        handleTeacherChange(value) {
            this.selectedTeacherId = value;
        },
        fetchClasses() {
            this.$axios.get('http://127.0.0.1:8090/class/getClass')
                .then(response => {
                    this.classes = response.data;
                })
                .catch(error => {
                    console.error('获取教学班列表失败:', error);
                });
        },
        handleClassChange(value) {
            this.selectedClassId = value;
        },
        doMod(){
            this.form.activityId=this.activityId
            this.form.teacherId=this.teacherId
            this.$axios.post('http://localhost:8090/course/update',this.form).then(res=>res.data).then(res=> {
                console.log(res)
                if(res.code==200){
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    this.centerDialogVisible=false
                    this.loadPost()
                }else {
                    this.$message.error('修改失败');
                }
            })

        },
        mod(row){
            this.centerDialogVisible=true
            this.$nextTick(()=>{
                console.log(row)
                this.form.id=row.id
                this.form.courseName=row.courseName
                this.form.status=row.status

            })

        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(() => {
                    done();
                })
                .catch(() => {});
        },
        del(id){
            this.confirmDelete=true
            this.id=id;
            console.log(id)
        },
        cancel(){
            this.confirmDelete=false
        },
        confirm(id){
            id=this.id
            console.log(id)
            this.$axios.get('http://localhost:8090/course/del?id='+id).then(res=>res.data).then(res=> {
                console.log(res)
                if(res.code==200){
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                    this.confirmDelete=false
                    this.loadPost()
                }else {
                    this.$message.error('删除失败');
                }
            })
        },
    },
    beforeMount(){
        this.loadPost()
    }
}
</script>

<style scoped>

</style>